<template>
  <div id="tab-bar-content" :class="{ activez: !isActive }">
    <div class="tab-bars">
      <div class="tabimg">
        <img src="../../assets/img/comment/logo.png" alt="" />
      </div>

      <tab-bar path="/home" class="fontd hover">
        <div slot="item-icon" class="tab-title">首页</div>
      </tab-bar>
      <tab-bar path="/news" class="fontd hover">
        <div slot="item-icon" class="tab-title">新闻资讯</div>
      </tab-bar>
      <tab-bar path="/security" class="fontd hover">
        <div slot="item-icon" class="tab-title">残保金</div>
      </tab-bar>
      <tab-bar path="/education" class="fontd hover">
        <div slot="item-icon" class="tab-title">职业教育</div>
      </tab-bar>
      <tab-bar path="/about" class="fontd hover">
        <div slot="item-icon" class="tab-title">关于我们</div>
      </tab-bar>

      <div class="phone fontd">
        <img src="../../assets/img/comment/14.png" alt="" />
        <span>18732685261</span>
      </div>
    </div>
  </div>
</template>
<script>
import TabBar from "./TabBar";

export default {
  components: { TabBar },
  name: "TabBarContent",
  data() {
    return {
      i: 0,
      isActive: true,
    };
  },
  mounted() {
    this.i = this.$store.state.i1;
    // 监听（绑定）滚轮 滚动事件
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    handleScroll() {
      // 页面滚动距顶部距离
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;

      var scroll = scrollTop - this.i;
      this.i = scrollTop;
      if (scroll < 0) {
        
        return (this.isActive = true);
      } else {
        return (this.isActive = false);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.activez {
  // display: none!important;
  opacity: 0 !important;
  z-index: -10 !important   ;
  transition: all 0.3s linear;
}
#tab-bar-content {
  width: 100%;
  height: 80px;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  opacity: 1;
  // display: block;
  transition: all 0.3s linear;
}
.tab-bars {
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.tab-bars div {
  padding: 0 15px;
  display: flex;
  align-items: center;
}
span {
  color: #36924e;
}
.hover:hover {
  background: #36924e;
  color: #fff;
}
</style>